<template>
  <view class="login-content">
    <view class="login-title">
      登录
    </view>
    <view class="iphone">
      <input class="input" type="number" placeholder="输入手机号" v-model="loginInfo.phoneNum"/>
    </view>

    <view class="password" v-if="loginInfo.type === 2">
      <input class="input" placeholder="请输入密码" :value="loginInfo.password"/>
    </view>
    <view class="test" v-if="loginInfo.type === 1">
      <input class="input" type="text" placeholder="输入验证码" v-model="loginInfo.code"/>
      <view class="get-test" type="default" @click="getTest()" v-if="timer <= 0">获取验证码</view>
      <view class="get-test" type="default" v-else>{{ timer + 's' }}</view>
    </view>
    <view class="test-btn" v-if="loginInfo.type === 2">
      <text @click="changeLoginType(1)">手机验证码登录>></text>
    </view>
    <view class="password-btn" v-if="loginInfo.type === 1">
      <text @click="changeLoginType(2)">密码登录>></text>
    </view>

    <view class="_bottom">
      <x-button size="large" :round="true" @click="login">登录</x-button>
    </view>
  </view>
</template>

<script setup>
import XButton from '@/components/x-button.vue'
import {ref} from "vue";
import {reqLogin, reqSendMsg} from '@/api'

const loginInfo = ref({
  type: 1,
  phoneNum: null,
  code: null,
})
const timer = ref(0)

async function getTest() {
  await reqSendMsg({phoneNum: loginInfo.value.phoneNum})
  timer.value = 60
  const timerId = setInterval(function () {
    timer.value = timer.value - 1
    if (timer.value === 0) {
      clearInterval(timerId)
    }
  }, 1000)
}

function changeLoginType(num) {
  uni.showToast({title: "暂不支持该方式登陆"})
}

async function login() {
  const data = (await reqLogin(loginInfo.value)).data
  uni.setStorageSync("TOKEN", data.token)
  await uni.navigateBack()
}
</script>

<style scoped>
.login-content {
  padding: 150rpx 30rpx;
  text-align: center;
}

.login-title {
  font-size: 52rpx;
  font-weight: bold;
  margin-bottom: 60rpx;
}

.iphone,
.password,
.test {
  position: relative;
  margin-bottom: 30px;
}

.input {
  height: 100rpx;
  background: #F8F8F8;
  border-radius: 50rpx;
  text-align: left;
  padding: 30rpx;
  box-sizing: border-box;
  font-size: 30rpx;
}

.test-btn, .password-btn {
  color: #ff8b33;
  font-size: 30rpx;
  text-align: right;
}

.get-test {
  color: #ff8b33;
  font-size: 30rpx;
  width: 244rpx;
  height: 100rpx;
  border: 2rpx solid #FF8B33;
  border-radius: 50rpx;
  line-height: 100rpx;
}

.test {
  display: flex;
  justify-content: space-between;
}

._bottom {
  margin-top: 50rpx;
}
</style>